<template>
    <div class="bottomNavigation">
        <!-- 默认导航 -->
        <section v-if="!datas.imageList || !datas.imageList[0]" class="defaultNavigation">
            <!-- 导航 -->
            <div v-for="index in 6" :key="index" class="navigationList">
                <!-- 图片 -->
                <img src="../../../../assets/images/imgs.png" alt="默认图片" draggable="false" />
                <!-- 文字 -->
                <p>底部导航</p>
            </div>
        </section>

        <!-- 导航列表 -->
        <section v-else class="defaultNavigation">
            <!-- 导航 -->
            <div v-for="(item, index) in datas.imageList" :key="index" class="navigationList">
                <!-- 图片 -->
                <img :src="item.src" draggable="false" />
                <!-- 文字 -->
                <p :style="{'font-size': datas.textSize + 'px' }"> {{ item.text }} </p>
            </div>
        </section>

        <!-- 删除组件 -->
        <slot name="deles" />
    </div>
</template>
<script>
export default {
    name: "BottomNavigation",
    props: {
        datas: Object,
    },
    created() {
        console.log(this.datas, "--------BottomNavigation");
    },
}
</script>
<style lang="scss" scoped>
.bottomNavigation{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 60%;
    .defaultNavigation{
        // position: fixed;
        // bottom: 100px;
        // left: 30%;
        width: 502px;
        // height: 77px;
        margin: 0 auto;
        background: rgba(255,255,255,0.15);
        border-radius: 14px 14px 14px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:10px 20px;
        .navigationList{
            width: 16.7%;
            img{
                width: 46px;
                height: 46px;
                border-radius: 8px;
            }
            p{
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;  
            }
        }
    }
}
</style>